<template>
	<view style="display: flex;flex-direction:column">

		<!-- 商品卡片 start -->
		<view class="bg-pink" style="position:relative; height:220rpx;width: 750rpx;"></view>
		<view class="bg-light-secondary"></view>
		<view class="bg-white rounded-20 ml-2 position-absolute card">
			<view class="box-c"> 
				<view class="box user-info d-ai-c">
					<view class="flex-1 box d-jc-c d-ac-c">
						<image  @tap='userEdit' v-if="loginState" class="logo rounded-circle" :src="userInfo.userInfo.image" style="" mode="widthFix">
						</image>
						<image  @tap="login"  v-if="!loginState"  class="logo rounded-circle" src="../../static/images/user/user_login.png" style=""
							mode="">
						</image>
					</view>
					<view class="flex-2 box-c d-jc-sb user-type">
						<text @tap='userEdit' v-if="loginState">{{userInfo.userInfo.nickName}}</text>
						<text class="no-login" v-if="!loginState" @tap="login">未登录</text>
						<text @tap="changeStatus">切换到志愿者中心</text>
					</view>

					<view class="flex-1 box d-ai-c d-jc-end myQR" @tap="myQR">
						<text type="" class="iconfont iconico">
						</text>
						<text type="" class="iconfont iconqianjin">

						</text>
					</view>
				</view>
				<view class="link"></view>
				<view class="box d-jc-c user" v-if="loginState">
					<view class="flex-1 box-c">
						<view class="number box">
							<text class="flex-2">我的积分:</text>
							<text  class="flex-3">{{userInfo.userInfo.accumulatePoints}}</text>
						</view>
						<view class="number box">
							<text class="flex-2">奖励积分:</text>
							<text  class="flex-3">{{userInfo.userInfo.signIntegral}}</text>
						</view>
					</view>
					<view class="flex-1 recode box d-jc-c d-ai-c" @tap="myiItegral">
						<text class="" @tap='myiItegral()'>
							积分记录
						</text>
					</view>

				</view>

			</view>

		</view>
		<view class="box-c">
			<view class="" @tap="payIntegral">
				<text style="margin-left: 8%;font-size: 30rpx;height: 130rpx;line-height: 130rpx">充值积分</text>
				<view class="iconfont iconqianjin" style="display: inline;margin-left: 500rpx;"></view>
				<view class="link2"></view>
			</view>
			<view class="" @tap="myOrder">
				<text style="margin-left: 8%;font-size: 30rpx;height: 130rpx;line-height: 130rpx">我的订单</text>
				<view class="iconfont iconqianjin" style="display: inline;margin-left: 500rpx;"></view>
				<view class="link2"></view>
			</view>
			<view class="" @tap="myclass" v-if="this.getUserIn.role==='teacher'">
				<text style="margin-left: 8%;font-size: 30rpx;height: 130rpx;line-height: 130rpx">我的班级</text>
				<view class="iconfont iconqianjin" style="display: inline;margin-left: 500rpx;"></view>
				<view class="link2"></view>
			</view>
			<view class="" @tap="lessonOrder">
				<text style="margin-left: 8%;font-size: 30rpx;height: 130rpx;line-height: 130rpx">课程订单</text>
				<view class="iconfont iconqianjin" style="display: inline;margin-left: 500rpx;"></view>
				<view class="link2"></view>
			</view>
			<view class="" @tap="mySchedule">
				<text style="margin-left: 8%;font-size: 30rpx;height: 130rpx;line-height: 130rpx">我的课程表</text>
				<view class="iconfont iconqianjin" style="display: inline;margin-left:470rpx;"></view>
				<view class="link2"></view>
			</view>
			<view class="" @tap="myAddress">
				<text style="margin-left: 8%;font-size: 30rpx;height: 130rpx;line-height: 130rpx;">我的收货地址</text>
				<view class="iconfont iconqianjin" style="display: inline;margin-left: 440rpx;"></view>
				<view class="link2"></view>
			</view>

		</view>
		<view class="box-c" v-if="loginState">
			<button type="default" style="margin-bottom: 100rpx;"  class="logout bg-pink" @click="bindLogin()">退出登录</button>

		</view>


	</view>
</template>

<script>
	import hansTabber from '../../components/hans-tabbar/hans-tabbar.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		props: {
			visible: Boolean
		},
		components: {
			hansTabber
		},
		computed: mapState(['loginState', 'userInfo']),
		data() {
			return {
				current1: 3,
				user: {},
				testdata: {},
				getUserIn:''

			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '../index/index'
			})
		},
		onShow() {
			this.getUserInfo()

		},
		methods: {
			...mapMutations(['logout','setUserInfo']),
			userEdit(){
				uni.navigateTo({
					url: 'userEdit'
				});

			},
			// 缓存获取用户信息
			getUserInfo() {
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}

				})

			},
			changeStatus() {
				uni.showToast({
					title: '功能暂未开放',
					duration: 2000,
					icon: "none"
				})
				//修改tabbar
				// uni.setTabBarItem({
				// 	index: 0,
				// 	pagePath: 'pages/volunteer/hire-list',
				// 	text: "111"
				// })
				// uni.navigateTo({
				// 	url: '../volunteer/hire-list'
				// })
			},
			async mySchedule(){
				  let res = await this.$api.checkLogin();
				  if(res.data.success){
					  uni.navigateTo({
					  	url: './sign-schedule'
					  });
				  }

			},
			myQR() {
				uni.navigateTo({
					url: './userQR'
				});
			},
			myiItegral() {
				uni.navigateTo({
					url: '../integral/integral',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			payIntegral() {
				uni.navigateTo({
					url: '../pay/pay',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				})
			},
			myclass() {
				uni.navigateTo({
					url: '../teacher/myclass',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			myAddress() {
				uni.navigateTo({
					url: '../address/address',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			lessonOrder(){
				uni.navigateTo({
					url: '../lesson/lesson',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			myOrder() {
				uni.navigateTo({
					url: '../order/order',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			otherFun(object) {
				if (!!object) {
					console.log(object)
				}
			},
			back() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/user/login',
					animationType: 'slide-in-bottom',
					animationDuration: 450
				});
			},
			bindLogin() {
				let _this = this
				uni.showModal({
					title: '退出登录',
					content: '确认退出当前账号？',
					success: function(res) {
						if (res.confirm) {
							_this.logout()
						} else if (res.cancel) {
							uni.showToast({
								title: '已取消',
								duration: 2000,
								icon: "none"
							})
						}
					}
				});

				// this.getUserInfo()
			},




		}
	}
</script>

<style>

	.number{
		width: 300rpx;
		margin-left: 40rpx;
		color: #4d4d4d;
	}
	.number text:nth-child(2){
		color: #FF5551;
		font-weight: 600;
	}
	.no-login{
		font-weight: 600;
		font-size: 32rpx;
	}
	.bg-light-secondary {
		position: relative;
		height: 150rpx;
		width: 750rpx;
	}

	.myQR text {
		font-size: 40rpx;
		padding: 0 10rpx;

	}

	.user-type text:first-child {
		font-weight: 600;
		font-size: 34rpx;

	}

	.user-type text:last-child {
		color: #FF5551;
		font-size: 30rpx;
		font-weight: 600;


	}

	.user-info {
		padding: 10rpx 30rpx;
	}

	.recode {
		margin: 0 auto;
		position: relative;
	}

	.recode text {
		width: 180rpx;
		height: 50rpx;
		position: absolute;
		right: 50rpx;
		border: #FF7E51 solid 2rpx;
		border-radius: 30rpx;
		padding: 5rpx 0;
		color: #FF7E51;
	}

	.user text {
		text-align: center;
	}

	.user {
		margin: 20rpx 0;
	}

	.logout {
		color: #FFFFFF !important;
		margin-top: 100rpx;
		width: 550rpx;
	}

	.link2 {
		margin: 0 auto;
		width: 390px;
		height: 3rpx;
		margin-top: 14rpx;
		background: #d6d6d6;
	}

	.btn {
		line-height: 65rpx;
		text-align: center;
		width: 150rpx;
		height: 65rpx;
		background: #fafafa;
		border-radius: 35rpx;
		margin-left: 150rpx;
		border: solid #F76260 1rpx;
	}

	.link {
		margin: 0 auto;
		width: 300px;
		height: 2rpx;
		margin-top: 14rpx;
		background: #ebebeb;
	}



	.logo {
		width: 130rpx;
		height: 130rpx;


	}

	.card {
		height: 300rpx;
		margin-top: 50rpx;
		width: 710rpx;
		-moz-box-shadow: #d5d5d5 0px 0px 1px;
		/*firefox*/
		-webkit-box-shadow: #909090 0px 0px 1px;
		/*safari或chrome*/
		box-shadow: #bebebe 0px 0px 5px;
		/*opera或ie9*/
	}

	.card1 {

		-moz-box-shadow: #d5d5d5 0px 0px 0px;
		/*firefox*/
		-webkit-box-shadow: #ececec 0px 0px 0px;
		/*safari或chrome*/
		box-shadow: #bebebe 2px 1px 1rpx;
		/*opera或ie9*/
	}

	.tabbar {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}


	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FF5551;
	}
</style>
